<template>
	<view>
		<view class="cu-card dynamic no-card">
			<view class="cu-item shadow">
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<view class="cu-avatar round lg" :style="'background-image:url('+dataObj.cardDTO.avatar+');'">
						</view>
						<view class="content flex-sub">
							<view v-if="dataObj.cardDTO">{{dataObj.cardDTO.name || '未知用户'}}</view>
							<view class="text-gray text-df flex justify-between">
								{{dataObj.cardDTO.studentList[0].graduationYear}}届
								{{dataObj.cardDTO.studentList[0].position}}
								{{dataObj.cardDTO.studentList[0].graduationClass}}
							</view>
						</view>
					</view>
				</view>
				<view class="text-content">
					{{dataObj.content}}
				</view>
				<!-- style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"> -->
				<block v-if="dataObj.mediaList && dataObj.mediaList.length>0">
					<view class="grid flex-sub padding-lr"
						:class="dataObj.mediaList.length>1?'col-3 grid-square':'col-1'">
						<view v-for="(mediaItem,mediaIndex) in dataObj.mediaList" :key="mediaIndex" class="bg-img"
							:class="dataObj.mediaList.length>1?'':'only-img'"
							:style="'background-image:url('+mediaItem.previewUrl+');'" @tap="ViewImage(mediaIndex)"
							:data-url="mediaItem.previewUrl">
						</view>
					</view>
				</block>
				<view class="flex justify-between text-gray  padding">
					<view class="text-left text-df">
						{{dataObj.createTime}}
					</view>
					<view class="text-right text-xxl">
						<!-- <text class="cuIcon-attentionfill margin-lr-xs"></text> 10 -->
						<text class="cuIcon-appreciatefill margin-left" :class="dataObj.hasPraise ? 'text-red':''"
							@click="onPraise"></text>
						<text class="margin-left-xs">{{dataObj.praiseCnt}}</text>
						<text class="cuIcon-messagefill margin-left"></text>
						<text class="margin-left-xs">{{dataObj.commentCnt}}</text>
					</view>
				</view>
				<!-- 评论明细 -->
				<view class="cu-list menu-avatar comment solids-top">
					<view class="cu-item" v-for="(item,index) in commentData" :key="index"
						@longpress="onLongPress(item)">
						<view class="cu-avatar round" :style="'background-image:url('+item.fromUser.avatar+');'" />
						<view class="content">
							<view class="text-grey">{{item.fromUser.nickname}}</view>
							<view class="text-gray text-content text-df">
								{{item.content}}
							</view>
							<view v-if="item.toId" class="bg-grey padding-sm radius margin-top-sm text-sm">
								<view class="flex">
									<view>{{item.toName}}：</view>
									<view class="flex-sub">{{item.toContent}}</view>
								</view>
							</view>
							<view class="margin-top-sm flex justify-between text-xxl">
								<view class="text-gray text-df">{{item.createTime}}</view>
								<view>
									<!-- <text class="cuIcon-appreciatefill text-red"></text> -->
									<text class="cuIcon-messagefill text-gray margin-left-sm"
										@click="onReply(item)"></text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-tabbar-height"></view>
		<!-- 评论栏 -->
		<view class="cu-bar input foot">
			<view class="cu-avatar round" :style="'background-image:url('+cardInfo.avatar+');'"></view>
			<!-- <view class="action">
				<text class="cuIcon-roundaddfill text-grey"></text>
			</view> -->
			<input class="solid-bottom" maxlength="300" cursor-spacing="10" :placeholder="placeholder" :focus="focus"
				@blur="handleBlur" v-model="formData.content"></input>
			<view class="action">
				<!-- <text class="cuIcon-emojifill text-grey"></text> -->
			</view>
			<button class="cu-btn bg-red shadow-blur" @click="submit">发送</button>
		</view>
	</view>
</template>

<script>
	import {
		trend_detail
	} from '@/common/api/api.js';
	import {
		comment_send,
		comment_page,
		comment_delete,
		trend_praise
	} from '@/common/api/sns.js';

	export default {
		data() {
			return {
				cardInfo: uni.getStorageSync("cardInfo"),
				dataObj: {
					cardDTO: {}
				},
				commentData: [],
				formData: {},
				focus: false,
				placeholder: "不说点什么吗"
			};
		},
		onLoad(e) {
			this.dataObj.id = e.id
			this.getData()
		},
		methods: {
			getData() {
				trend_detail({
					trendId: this.dataObj.id
				}).then(res => {
					this.dataObj = this.$s.res(res)
				})
				comment_page({
					trendId: this.dataObj.id
				}).then(res => {
					this.commentData = this.$s.res(res).records
				})
			},
			ViewImage(index) {
				let urlArr = []
				this.dataObj.mediaList.forEach(item => {
					urlArr.push(item.previewUrl)
				})
				uni.previewImage({
					urls: urlArr,
					current: index
				});
			},
			onPraise() {
				trend_praise({
					trendId: this.dataObj.id
				}).then(res => {
					if (this.$s.suc(res)) {
						this.dataObj.hasPraise = !this.dataObj.hasPraise
						this.dataObj.praiseCnt = !this.dataObj.hasPraise ?
							this.dataObj.praiseCnt - 1 : this.dataObj.praiseCnt + 1
					}
				})
			},
			onLongPress(e) {
				console.log(e)
				if (this.dataObj.uid === this.cardInfo.uid || this.cardInfo.uid === e.fromUid) {
					uni.showActionSheet({
						itemList: ['删除'],
						success: (res) => {
							if (res.tapIndex === 0) {
								uni.showModal({
									title: '提示',
									content: '确定要删除评论吗？',
									cancelText: '取消',
									confirmText: '确定',
									success: res => {
										if (res.confirm) {
											comment_delete({
												id: e.id
											}).then(res => {
												if (this.$s.suc(res)) {
													this.getData()
												}
											})
										}
									}
								})

							}
						}
					});
				}
			},
			onReply(e) {
				this.focus = true
				this.placeholder = "回复：" + e.fromUser.nickname
				this.formData.toUid = e.fromUid
				this.formData.toId = e.id
			},
			handleBlur() {
				this.focus = false
				this.placeholder = "不说点什么吗"
				if (this.formData.toUid) {
					this.formData = {}
				}
			},
			submit() {
				if (this.cardInfo == null || this.cardInfo.status != '2') {
					uni.showToast({
						icon: 'none',
						title: '请先领取校友卡享受更多权益'
					})
					return
				}
				if (!this.formData.content) {
					uni.showToast({
						icon: 'none',
						title: "请输入评论内容"
					})
					return
				}
				this.formData.trendId = this.dataObj.id
				comment_send(this.formData).then(res => {
					if (this.$s.suc(res)) {
						uni.showToast({
							icon: 'success',
							title: "评论成功",
							success: () => {
								this.formData = {}
								this.getData()
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: white;
	}

	// .wrap-content{
	// 	padding: 0;
	// 	height: calc(100upx + env(safe-area-inset-bottom) / 2);
	// 	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
	// }
</style>